<template>
  <div class="customs" >
    <div class="customs-top">
      <h1 class="auto_title">海关数据</h1>
      <ul v-show="list.length>0">
        <marquee direction="up" width="auto" height="30" cellpadding="0" cellspacing="0"
                 scrollamount="2">
          <li v-for="item,index in list" title="点击查看全部更新信息"
              :key="index" @click="update"><i class="el-icon-caret-right"></i>{{item.DataNameCN}} {{item.DataUpdate}}
          </li>
        </marquee>
      </ul>
    </div>
    <div class="time">
      剩余时间：{{hours}}小时{{minute}}分钟
    </div>
    <TimeIfream ref="timeIfream" v-show="false"></TimeIfream>
  </div>
</template>

<script>
    import {getScrollList, getTime, haveJurisdiction, getCookie} from '@/api/automation/customs';
    import TimeIfream from '@/components/ocean/TimeIfream'
    import {getToken} from '@/util/auth'

    export default {
        name: "customs",
        components: {TimeIfream},
        data() {
            return {
                activeName: 'first',
                list: [],
                hours: '0',
                minute: '1',
                time: ''
            }
        },
        mounted() {
            let token = "bearer " + getToken()
            if (this.$refs.timeIfream) {
                // 再次判断是否购买海关数据
                haveJurisdiction().then(res => {
                    if (res.data == 0) {
                        this.$router.push('/ocean/customsData/notBuy');
                    } else if (res.data == 2) {
                        this.$router.push('/ocean/customsData/timeUp');
                    } else if (res.data == 1) { // 获取cookie
                        getCookie(token).then(res => {
                            // 获取滚动列表
                            this.$refs.searchOne.init();
                            this.getScrollList();
                            // 获取时间
                            getTime().then(res => {
                                this.hours = res.data.data[0].hour
                                this.minute = res.data.data[0].minute
                                if (this.hours == 0 && this.minute == 0) {
                                    this.$router.push('/ocean/customsData/timeUp');
                                }
                            })
                            this.resetTime();
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        methods: {
            update() {
                let routeUrl = this.$router.resolve('/ocean/customsData/update');
                window.open(routeUrl.href, '_blank');
            },
            getScrollList() {
                getScrollList(1, '').then(res => {
                    if (res.data.success) {
                        this.list = res.data.data;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            resetTime() {
                this.time = setTimeout(() => {
                    clearTimeout(this.time)
                    if (this.minute == 0) {
                        this.hours -= 1;
                        this.minute = 59
                    } else {
                        this.minute -= 1;
                    }

                    if (this.hours == 0 && this.minute == 0) {
                        this.$router.push('/ocean/customsData/timeUp');
                    }
                    this.resetTime()
                }, 60000)
            }
        },
        beforeDestroy() {
            clearTimeout(this.time)
        }
    }
</script>

<style lang="scss" scoped>
  .customs {
    .customs-top {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #f5f5f5;
      ul {
        display: flex;
        background-color: #E9F3FD;
        border-radius: 5px;
        color: #666;

        li {
          display: flex;
          align-items: center;
          line-height: 30px;
          font-size: 12px;
          padding: 0 10px;
          color: #232323;
          cursor: pointer;

          i {
            margin-right: 2.5px;
          }
        }
      }
    }

    .customs-content {
      .el-tabs.el-tabs--top {
        .el-tabs__header {
          padding-left: 0 !important;
        }
      }
    }

    .time {
      float: right;
      font-size: 14px;
      font-weight: 600;
      margin-top: -40px;
    }
  }
</style>
